<template>
  <div class="panel">
    <div style="margin-bottom:20px;text-align:right;">
      <button class="normal-btn-outline" style="width: 120px;" @click="dialogFormVisible = true">申请网站首页</button>
    </div>
    <div class="title">编辑机构信息</div>
    <div class="content">
      <div class="clearfix">
        <div class="left">
          <div class="input-group clearfix">
            <div class="left-title">
              机构名称：
            </div>
            <div class="right-content">
              <el-input size="small" v-model="data.name" style="width:260px;"></el-input>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              成立时间：
            </div>
            <div class="right-content">
              <el-date-picker
                size="small"
                v-model="data.founded"
                type="date"
                placeholder="选择日期"
                style="width:100%;"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              教学学段：
            </div>
            <div class="right-content">
              <el-select v-model="data.section" placeholder="请选择" style="width:100%;" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title" >
              机构简介：
            </div>
            <div class="right-content">
              <el-input type="textarea" v-model="data.intro"></el-input>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              联系电话：
            </div>
            <div class="right-content">
              <el-input size="small" v-model="data.phone"></el-input>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
            </div>
            <div class="right-content">
              <el-input size="small" v-model="data.email"></el-input>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
            </div>
            <div class="right-content">
              <el-input size="small" v-model="data.address"></el-input>
            </div>
          </div>
          <div class="input-group clearfix">
            <div class="left-title">
              课程简介：
            </div>
            <div class="right-content">
              <el-input type="textarea" v-model="data.course"></el-input>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="input-group ig2 clearfix">
            <div class="left-title">
              banner设置：
            </div>
            <div class="right-content">
              <div class="img-container">
                <img :src="data.licence_url" style="width:100%;"/>
              </div>
              <div class="file-container">
                <el-button size="small" @click="handleUpload">选取文件</el-button>
                <span>{{filename}}</span>
              </div>
            </div>
          </div>
          <!-- 教师 -->
          <div>
            <div class="input-group ig2 clearfix">
              <div class="left-title">
                教师姓名：
              </div>
              <div class="right-content">
                <el-input size="small" ></el-input>
              </div>
            </div>
            <div class="input-group ig2 clearfix">
              <div class="left-title">
                教师职称：
              </div>
              <div class="right-content">
                <el-input size="small"></el-input>
              </div>
            </div>
            <div class="input-group ig2 clearfix">
              <div class="left-title">
                教师简介：
              </div>
              <div class="right-content">
                <el-input type="textarea"></el-input>
              </div>
            </div>
          </div>
          <div class="add-teacher">
            <a href="javascript:;" @click="addNew = true">+新增教师</a>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <button class="gray-btn" >取消</button>
        <button class="common-btn" @click="handlePreserve">保存</button>
      </div>
    </div>
    <el-dialog title="新增老师" top="20px" :visible.sync="addNew">
      <el-form :model="form">
        <el-form-item label="教师姓名：" label-width="120px">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="教师职称：" label-width="120px">
          <el-input v-model="form.job_level"/>
        </el-form-item>
        <el-form-item label="教师简介：" label-width="120px">
          <el-input v-model="form.intro" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="教师头像：" label-width="120px">
          <el-button @click="handlePickImage">上传图片</el-button>
          <div v-if="form.image_url">
            <img :src="form.image_url" style="width:100%;"/>
          </div>
        </el-form-item>
        <div class="footer" style="text-align: center;">
          <el-button type="primary" @click="addNewT">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="申请首页展示" top="20px" :visible.sync="dialogFormVisible">
      <div class="top">
        <h3>申请须知</h3>
        <p>
          1、当前首页banner最近过期时间为：2017-08-01//<br/>
          2、当您申请成功后将在//26天后生效<br/>
          3、您的广告申请有效时间将从生效时间开始计时<br/>
          4、申请前，请完善机构信息<br/>
        </p>
        <h3>编辑申请信息</h3>
        <el-form>
          <el-form-item label="选择广告有效期：" >
            <el-select v-model="mo" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择支付方式：" >
            <el-select v-model="pay_type" placeholder="请选择">
              <el-option
                v-for="item in pay_types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付费用：" >
            <span style="font-size:18px;color:#EF6401">¥{{2000 * mo}}元</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer" style="text-align: center;">
        <el-button type="primary" @click="handleApply">立即申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getMyOrg } from 'api/user'
  import { addOrgTeaher, applyAds } from 'api/org'
  import pick from 'utils/file/picker'
  import moment from 'moment'
  // const mock = {
  //   address: 'string',
  //   orgid: 'string',
  //   email: 'string',
  //   phone: 'string',
  //   website: 'string',
  //   course: 'string',
  //   image_url: 'string'
  // }
  export default {

    name: 'no-site',

    data() {
      return {
        dialogFormVisible: false,
        data: {},
        filename: '未命名',
        pay_type: '',
        pay_types: [
          { label: '支付宝', value: 0 },
          { label: '微信支付', value: 1 }
        ],
        mo: '',
        options2: [
          { label: '一个月', value: 1 },
          { label: '一季度', value: 3 },
          { label: '半年', value: 6 },
          { label: '一年', value: 12 }
        ],
        options: [
          { name: '小学', id: 0 },
          { name: '初中', id: 1 },
          { name: '高中', id: 2 },
          { name: '大学', id: 3 }
        ],
        addNew: false,
        form: {
          name: '',
          job_level: '',
          intro: '',
          image_url: ''
        }
      };
    },
    created() {
      getMyOrg()
      .then(res => {
        if (res.data) {
          this.data = res.data
          this.data.section = res.data.section == 0 ? '小学' : res.data.section == 1 ? '初中' : res.data.section == 2 ? '高中' : res.data.section == 3 ? '大学' : ''
        }
      })
      .catch(err => console.log(err))
    },
    methods: {
      handlePreserve() {
        const { id, name, founded, section, intro, phone, email, address, course } = this.data
        const form = {
          orgid: id,
          name,
          section,
          intro,
          phone,
          email,
          address,
          course,
          founded: moment(founded).format('YYYY-MM-DD')
        }
        if (this.file) {
          form.image = this.file
          form.licence_url = this.file
        }
        getMyOrg(form, 'post')
        .then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        })
        .catch(err => console.log(err))
      },
      // 上传封面图
      handleUpload() {
        pick()
        .then(file => {
          this.file = file
          this.filename = file.name
          this.data.licence_url = window.URL.createObjectURL(file)
        })
        .catch(err => console.log(err))
      },
      // 上传教师头像
      handlePickImage() {
        pick('image')
        .then(file => {
          this.file = file
          this.form.image_url = window.URL.createObjectURL(file)
        })
        .catch(err => console.log(err))
      },
      addNewT() {
        const { id } = this.data
        const { name, job_level, intro } = this.form
        addOrgTeaher({
          organize_id: id,
          name,
          job_level,
          intro,
          image_url: this.file
        })
        .then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          location.reload()
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'success'
          })
        })
      },
      handleApply() {
        if (this.mo === '') {
          this.$message({
            message: '请选择有效期',
            type: 'warning'
          })
          return false
        }
        if (this.pay_type === '') {
          this.$message({
            message: '请选择支付方式',
            type: 'warning'
          })
          return false
        }
        applyAds({
          cost: 2000 * this.mo,
          month: this.mo,
          org_id: this.data.id,
          pay_type: this.pay_type
        })
        .then(res => {
          console.log(res)
          this.$message({
            message: '申请成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          location.reload()
        })
        .catch(err => {
          console.log(err)
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .panel{
    .title{
      background-color: #f4f4f4;
      padding: 0 20px;
      text-align: left;
      height: 40px;
      line-height: 40px;
    }
    .content{
      padding: 30px 0;
      .blue-btn-outline{
        float: right;
        width: 120px;
      }
      .left{
        float: left;
        width: 50%;
        border-right: 1px solid #e5e6e7;
      }
      .right{
        float: left;
        width: 50%;
      }
      .input-group{
        width: 330px;
        margin: 0 auto;
        margin-bottom: 14px;
        .left-title{
          width: 70px;
          float: left;
          line-height: 30px;
          text-align: right;
        }
        .right-content{
          width: 260px;
          float: left;
        }
      }
      .ig2{
        width: 350px;
        .left-title{
          width: 90px;
        }
        .right-content{
          width: 260px;
          .img-container{
            height: 173px;
            width: 260px;
            background-color: #F4F4F4;
            overflow: hidden;
          }
          .file-container{
            margin-top: 10px;
          }
        }
      }
      .add-teacher{
        width: 350px;
        margin: 0 auto;
        color: #EF6401;
        text-align: right;
      }
      .btn-group{
        margin: 80px auto;
        text-align: center;
        >button{
          width: 160px;
          height: 40px;
        }
      }
    }
  }
  .top{
    width: 475px;
    margin: 0 auto;
    color: #333;
  }
</style>